<template>
  <view class="keyboard-overlay" v-if="showKeyboard" @click.stop="closeKeyboard">
    <view class="keyboard" @click.stop>
      <!-- رەقەملەر -->
      <view class="number-pad">
        <view
            v-for="num in [1,2,3,4,5,6,7,8,9,0]"
            :key="num"
            class="key number-key"
            @click="appendNumber(num)"
        >
          {{ num }}
        </view>
      </view>

      <!-- بەلگىلەر -->
      <view class="symbols">
        <view class="key symbol-key" @click="appendSymbol(',')">،</view>
        <view class="key symbol-key" @click="appendSymbol('-')">-</view>
        <view class="key delete-key" @click="deleteChar">
          <image src="/static/icons/delete.png" class="delete-icon"/>
        </view>
      </view>

      <!-- تاماملاش -->
      <view class="done-btn" @click="confirmInput">تامام</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      showKeyboard: false,
      inputValue: ''
    }
  },

  methods: {
    openKeyboard() {
      this.showKeyboard = true
      this.inputValue = this.value
    },

    closeKeyboard() {
      this.showKeyboard = false
    },

    appendNumber(num) {
      this.inputValue += num
    },

    appendSymbol(symbol) {
      this.inputValue += symbol
    },

    deleteChar() {
      this.inputValue = this.inputValue.slice(0, -1)
    },

    confirmInput() {
      this.$emit('input', this.inputValue)
      this.closeKeyboard()
    }
  }
}
</script>

<style lang="scss" scoped>
.keyboard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.keyboard {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f5f5f5;
  padding: 20rpx;
  border-radius: 20rpx 20rpx 0 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.number-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rpx;
  margin-bottom: 10rpx;
}

.key {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10rpx;
  font-size: 36rpx;

  &:active {
    background: #eee;
  }
}

.symbols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rpx;
  margin-bottom: 20rpx;
}

.delete-icon {
  width: 40rpx;
  height: 40rpx;
}

.done-btn {
  height: 90rpx;
  background: #007AFF;
  color: #fff;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;

  &:active {
    opacity: 0.9;
  }
}
</style>
